<template>
    <div class="admin-promotional-category">
        <div class="admin-promotional-header">促销活动列表</div>
        <div class="admin-promotional-content">
            <span><el-button type="primary"
                    @click="() => router.push({ path: '/admin/add_promotional' })">新增</el-button></span>
            <div>
                <el-table v-loading="loading" :data="promotionalCategoryData" style="width: 100%">
                    <el-table-column type="index" width="50" />
                    <el-table-column prop="title" label="中文标题" show-overflow-tooltip />
                    <el-table-column prop="title_en" label="英文标题" show-overflow-tooltip/>
                    <el-table-column label="操作">
                        <template v-slot:default="scope">
                            <el-button type="danger" :icon="Delete" circle
                                @click="deletePromotionalCategory(scope.row.id)" />
                            <el-button type="primary" :icon="Edit" circle
                                @click='() => router.push({ path: "/admin/update_promotional", query: { "id": scope.row.id } })' />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 删除确认 -->
        <el-dialog v-model="deleteDialog" title="删除此活动" width="500" align-center>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onSubmitDeleteCancle">取消</el-button>
                    <el-button type="danger" @click="onSubmitDelete">
                        删除
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { listPromotional, delPromotional } from '../../requests/index';
import { useRouter } from 'vue-router';
const router = useRouter();
const loading = ref(true);
const token = window.localStorage.getItem("token");
const headersAdmin = {
    Authorization: `Bearer ${token}`
};
const promotionalCategoryData = ref([]);
const deleteDialog = ref(false);
const deletePromotionalID = ref();
const getPromotionalCategoryData = async () => {
    loading.value = true;
    const res = await listPromotional();
    if (res.status === 2000) {
        promotionalCategoryData.value = res.data;
    } else {
        ElMessage.error("获取列表失败");
    };
    loading.value = false;
}
getPromotionalCategoryData();
// 删除活动
const deletePromotionalCategory = (id) => {
    deleteDialog.value = true;
    deletePromotionalID.value = id;
};
// 取消删除
const onSubmitDeleteCancle = () =>{
    deletePromotionalID.value = null;
    deleteDialog.value = false;
}
// 确认删除
const onSubmitDelete = async()=>{
    const res = await delPromotional({ "id": deletePromotionalID.value });
    if (res.status === 2000) {
        ElMessage.success("删除成功")
    }else{
        ElMessage.error("删除失败")
    };
    deleteDialog.value = false;
    getPromotionalCategoryData();
};

// 更新活动
const updatePromotionalCategory = async (row) => {
    loading.value = false;
};

updatePromotionalCategory();
</script>
<style scoped>
.admin-promotional-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
}

.admin-promotional-content {
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-promotional-category {
    min-height: 100px;
}
</style>